<!--终端新增modal-->
<template xmlns='http://www.w3.org/1999/html'>
  <j-modal
    title='活动执行数据'
    width='90%'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @cancel='handleCancel'
    @ok='handleOk'
    cancelText='关闭'
    style='height: 100%;overflow: auto;padding-bottom: 53px;'>
    <template slot='footer'>
      <a-button type='primary' @click='handleCheck("3")' >合格</a-button>
      <a-button type='primary' @click='handleCheck("4")' >不合格</a-button>
      <a-button @click='handleCancel'>取消</a-button>
      <!--      <a-button @click='handleOk' type='primary' :loading='confirmLoading'>确认</a-button>-->
    </template>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24' style='border-bottom: 1px solid #e5e5e5'>
          <div class='basicNew'>基本信息</div>
          <a-col :md='8' :sm='24'>
            <a-form-item label='活动编码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入活动编码'
                       v-decorator="['actCode']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='活动名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入活动名称'
                       v-decorator="['actName', validatorRules.terminalName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='活动时间'
              >
              <a-range-picker :disabled='true' showTime format='YYYY-MM-DD' v-decorator="[ 'punchTime', {}]"
                              :placeholder="['开始时间','结束时间']" style='width:100%' />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='终端编码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入终端编码'
                       v-decorator="['terminalCode', validatorRules.terminalName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='终端名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入终端名称'
                       v-decorator="['terminalName', validatorRules.terminalName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='提交时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入提交时间'
                       v-decorator="['createTime', validatorRules.terminalName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='姓名' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入姓名'
                       v-decorator="['createName', validatorRules.terminalName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='职位' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入职位'
                       v-decorator="['positionName']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='所属组织' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入所属组织'
                       v-decorator="['orgName']" />
            </a-form-item>
          </a-col>
        </a-row>
        <!--      执行结果-->
        <div>
          <div class='bottom-box'>
            <div class='first-line'>
              <span style='font-weight: 700'>执行结果 :</span>
              <span>定位信息 : {{ model.address }}</span>
            </div>
            <div class='second-line' v-for='(item,index) in model.executeDetailList' :key='index'>
              <!--              AI照片+识别结果-->
              <div style='font-weight: 700'>{{ item.categoriesDetailName }}</div>
              <div class='box-one' v-for='(items,indexs) in item.executeDetailInfos' :key='indexs'>
                <div class='second-word1'>{{ items.exampleName }} :</div>
                <div class='box-one' style='flex: 1'>
                  <div style='width: 50%;max-width: 50%;overflow: scroll' v-for='(itemss,ui) in items.fileUrlList'
                       :key='ui'>
                    <div style='display: flex'>
                      <div class='second-picW'>
                        <viewer :images='images'>
                          <img class='second-pic' :src='itemss.url'>
                        </viewer>
                      </div>
                      <div class='second-picW1'>
                        <div class='second-word'>
                          <div>AI识别结果 :{{ items.qualifiedFlagStr }}</div>
                          <div v-if='itemss.aiResult && itemss.aiResult.length !== 0 '>
                            <span v-if='itemss.aiResult[0].productColumn'>行 : {{ itemss.aiResult[0].productColumn }}</span>
                            <span v-if='itemss.aiResult[0].productRow'>列 : {{ itemss.aiResult[0].productRow }}</span>
                          </div>
                        </div>
                        <div v-if='!itemss.aiResult || itemss.aiResult.length == 0'><span>无</span></div>
                        <div v-if='itemss.aiResult && itemss.aiResult.length !== 0 '>
                          <a-table
                            size='small'
                            :scroll='{x:"max-content",y:200}'
                            rowKey='id'
                            style='width: 100%'
                            :columns='aiResultColumns'
                            :dataSource='itemss.aiResult'
                            :pagination='false'
                          ></a-table>
                          <!--                            <span  v-if='items.aiResult.length>1'></span>-->
                          <!--                            <span  v-if='items.aiResult.length == 1'>-->
                          <!--                           <span v-for='(items2,indexs2) in items.aiResult' :key='indexs2'>-->
                          <!--                            {{items2.name}}-->
                          <!--                          </span>-->
                          <!--                            </span>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style='margin-top: 25px;width: 72%'>
                <a-form-item
                  :labelCol='{xs:3,xm:24}'
                  :wrapperCol='{xs:21,xm:24}'
                  label='说明描述'
                  >
                  <a-textarea :disabled='true' style='width: 100%' placeholder='请输入备注'
                              v-model='item.remarks' />
                  <!--          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'punchTime', {}]" />-->
                </a-form-item>
              </div>
            </div>
          </div>
          <div>

          </div>
        </div>
        <!--       审核意见-->
        <a-row :gutter='24' style='border-bottom: 1px solid #e5e5e5'>
          <a-col :md='8' :sm='24'>
            <a-form-item label='请输入分数' type='number' :labelCol='{xm:24,xs:6}' :wrapperCol='{xm:24,xs:18}'>
              <a-input placeholder='请输入扣除分数'
                       v-decorator="['deductScore', validatorRules.deductScore]" />
            </a-form-item>
          </a-col>
          <a-col :md='16' :sm='24'>
            <a-form-item label='审核意见' :labelCol='{xm:24,xs:3}' :wrapperCol='{xm:24,xs:18}'>
              <a-textarea placeholder='请输入审核意见'
                          v-decorator="['reviewComments', validatorRules.reviewComments]" />
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>

      <proChose ref='prochoose' v-bind='modalProps' @okbro='okbropro'></proChose>
      <!--      <formItemsDraw ref='modalForm' @okpopup='modalFormOk' v-bind='configw'></formItemsDraw>-->
    </a-spin>
  </j-modal>
</template>

<script>

import pick from 'lodash.pick'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import JImageUpload from '@/components/cn-form/JImageUpload'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JSelectUserByDep from '@/components/cn-select-popup/JSelectUserByDep'
import JSelectTerminal from '@/components/cn-select-popup/JSelectTerminal'
import Area from '@comp/utils/Area'
import proChose from '@comp/cn-components/ProChose'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import { queryDepartTreeList } from '@/api/api'
import { getAction, postAction, deleteAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'ExecutionModal',
  components: {
    JImageUpload,
    AFormItem,
    ATextarea,
    JTreeSelect,
    JSelectUserByDep,
    JSelectTerminal,
    JAreaLinkage,
    proChose
  },
  data() {
    return {
      aiResultColumns: [
        {
          title: '商品名称',
          align: 'left',
          width: 251,
          dataIndex: 'productName'
        },
        {
          title: '商品数量',
          align: 'left',
          width: 100,
          dataIndex: 'productNum'
        }
        // {
        //   title: '排面规格',
        //   align: 'left',
        //   width:80,
        //   dataIndex: 'bpmStatusStr',
        //   customRender:(t,r,dex)=>{
        //     return r.productRow+'-'+r.productColumn
        //   }
        // },
      ],
      images: [],
      custList: [],
      name: '',

      formItems: [{
        name: '',
        telephone: '',
        isMain: ''
      }],
      itemModal:
        {
          name: '',
          telephone: '',
          isMain: ''
        },
      areaLinkage: '',
      province: '',
      city: '',
      area: '',
      custCode: '',
      custName: '',
      showCode: 4,
      terminalName: '',
      terminalCode: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 5
        }
      }
      ,
      wrapperCol: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 19
        }
      }
      ,
      labelCol1: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 3
        }
      }
      ,
      wrapperCol1: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 21
        }
      }
      ,
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        warehouseCode: {
          rules: [{
            required: true, message: '请输入仓库编码!', trigger: 'submit'
          }]
        }
        ,
        warehouseName: {
          rules: [{
            required: true, message: '请输入仓库名称!', trigger: 'submit'
          }]
        }
        ,
        warehouseType: {
          rules: [{
            required: true, message: '请选择类型!', trigger: 'submit'
          }]
        }
        ,
        status: {
          rules: [{
            required: true, message: '请选择状态!', trigger: 'submit'
          }]
        }
      }
      ,
      url: {
        add: window._CONFIG['domianURL'] + '/cnTerminalController/saveOrUpdateTerminal',
        check: window._CONFIG['domianTpmURL'] + '/report/tpmActExecuteReport/examineReport'

      },
      treeData: []
    }
  },
  methods: {
    handleCheck(satus) {
      let that = this
      let ids = this.model.executeId
      this.confirmLoading = true
      let deductScore = this.form.getFieldValue('deductScore')
      let reviewComments = this.form.getFieldValue('reviewComments')
      postAction(this.url.check, { ids: ids, bpmStatus: satus, deductScore, reviewComments }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
        that.$emit('ok')
        that.close()
      })
    },
    personChange(e) {
      console.log(e)
    },
    loadTree() {
      var that = this
      queryDepartTreeList().then((res) => {
        if (res.success) {
          that.treeData = []
          let treeList = res.result
          for (let a = 0; a < treeList.length; a++) {
            let temp = treeList[a]
            temp.isLeaf = temp.leaf
            that.treeData.push(temp)
          }
        }
      })
    },

    addTicket() {
      let modal = JSON.parse(JSON.stringify(this.itemModal))
      this.formItems.push(modal)
      console.log(this.formItems)
    },
    modalFormOk(e1, e2) {
      console.log(e1, e2)
    },
    initAreaData() {
      if (!this.areaData) {
        this.areaData = new Area()
      }
    },
    areaChange(code) {
      let cities = this.areaData.getText(code, '多个值').cities
      let codes = this.areaData.getText(code, '多个值').codes
      this.model.province = cities.split('/')[0]
      this.model.city = cities.split('/')[1]
      this.model.area = cities.split('/')[2]
      this.model.provinceCode = this.dealCode(codes.split('/')[0], 2).join('')
      this.model.cityCode = this.dealCode(codes.split('/')[1], 4).join('')
      this.model.areaCode = this.dealCode(codes.split('/')[2], 6).join('')
      console.log(this.model)
    },
    // params:code:编码，count位数
    dealCode(code, count) {
      console.log(code)
      let num = code.split('')
      let codes = []
      for (let i = 0; i < count; i++) {
        codes.push(num[i])
      }
      return codes
    },
    add() {
      this.edit({})
    },
    edit(record) {
      console.log(record)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
        let a = [moment(this.model.startDate, 'YYYY-MM-DD'), moment(this.model.endDate, 'YYYY-MM-DD')]
        console.log(a)
        this.form.setFieldsValue({ punchTime: this.model.startDate ? [moment(this.model.startDate, 'YYYY-MM-DD'), moment(this.model.endDate, 'YYYY-MM-DD')] : null })
      })
    },
    close() {
      this.visible = false
    },
    okbropro(record, status, status2, status3) {
      console.log(record, status, status2, status3)
      if (status2 == 'customerCode') {
        this.form.setFieldsValue({
          customerCode: record[0].customerCode,
          customerName: record[0].customerName
        })
      } else if (status == 'personCode') {
        this.form.setFieldsValue({
          person: record[0].username,
          organization: record[0].orgCode
        })
      } else if (status == 'custOrgCode') {
        this.form.setFieldsValue({
          custOrgCode: record[0].superCode
        })
      }
    },
    custOrgCodeSearch(status) {
      this.$refs.prochoose.rowKey = 'id'
      let formconfig = [
        {
          key: 'superCode',
          label: '商超编码'
        },
        {
          key: 'superName',
          label: '商超名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '商超编码',
            align: 'left',
            dataIndex: 'superCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '商超名称',
            align: 'left',
            dataIndex: 'superName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/cnSysSuper/getPageList',
        multiple: false,
        columW: 10
      }
      this.name = '商超'
      this.$refs.prochoose.edit(formconfig, tableconfig, status, 'superName')
    },
    personSearch(status) {
      this.$refs.prochoose.rowKey = 'id'
      let formconfig = [
        {
          key: 'realname',
          label: '用户账户'
        },
        {
          key: 'username',
          label: '用户名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '用户账户',
            align: 'left',
            dataIndex: 'realname',
            width: 120,
            ellipsis: true
          },
          {
            title: '用户名称',
            align: 'left',
            dataIndex: 'username',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/cnUserController/findEnterpriseUsersPageList',
        multiple: false,
        columW: 10
      }
      this.name = '用户'
      let dataSource = []
      if (this.form.getFieldValue('username')) {
        dataSource = [{
          username: this.form.getFieldValue('username'),
          realname: this.form.getFieldValue('realname')
        }]
      }
      console.log(dataSource)
      this.$refs.prochoose.edit(formconfig, tableconfig, status, 'realname', dataSource)
    },
    custSearch(status = 'customerCode', status2) {
      if (status2 == 'customerCode') {
        this.$refs.prochoose.rowKey = 'customerCode'
        let formconfig = [
          {
            key: 'customerCode',
            label: '经销商编码'
          },
          {
            key: 'customerName',
            label: '经销商名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '经销商编码',
              align: 'center',
              dataIndex: 'customerCode',
              width: 120,
              ellipsis: true
            },
            {
              title: '经销商名称',
              align: 'center',
              dataIndex: 'customerName',
              width: 120,
              ellipsis: true
            }
          ],
          list: window._CONFIG['domianURL'] + '/customerController/getPageList',
          multiple: false,
          columW: 11
        }
        // let dataSource = []
        // if (this.form.getFieldValue('custCode')) {
        //   dataSource = [{
        //     custCode: this.form.getFieldValue('custCode'),
        //     custName: this.form.getFieldValue('custName')
        //   }]
        // }
        this.name = '经销商'
        this.$refs.prochoose.edit(formconfig, tableconfig, status, status2, null)
      }
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          // if (values.imgs && values.imgs.length) {
          //   values.imgs.slice(0).map((url, index) => {
          //     extendVos.push({
          //       dataType: 1,
          //       code: url,
          //       orderNum: index
          //     })
          //   })
          // }
          that.confirmLoading = true
          let formData = Object.assign({}, this.model, values, this.areaLinkage)
          formData.extendVos = this.formItems

          postAction(this.url.add, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  },
  created() {
    this.initAreaData()
    this.loadTree()
  },
  computed: {
    modalProps() {
      return Object.assign({}, {
        name: this.name
      })
    },
    configw() {
      return {
        title: '新增发票信息',
        width: '40%',
        config: {
          list: [
            {
              label: '客户名称',
              type: 'input',
              disabled: true,
              placeholder: '请输入路由ID',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '上账科目编码',
              type: 'input',
              placeholder: '请输入上账科目编码',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '发票编码',
              type: 'input',
              placeholder: '请输入发票编码',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '税码',
              type: 'input',
              placeholder: '请输入税码',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '发票金额',
              type: 'input',
              placeholder: '请输入发票金额(不含税)',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '发票金额',
              type: 'input',
              placeholder: '请输入发票金额(含税)',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '税金',
              type: 'input',
              placeholder: '请输入税金',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: 'ERP成本中心',
              type: 'input',
              placeholder: '请输入ERP成本中心',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '摘要',
              type: 'input',
              placeholder: '请输入摘要',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            }
          ]
        }
      }
    }
  }
}
</script>

<style lang='less' scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.basicNew {
  padding: 8px 6px 8px 8px;
  margin-bottom: 16px;

  font-size: 16px;
  font-weight: 700;
}

.title-text {
  width: 100%;
  border: none;
  border-top: 1px solid rgb(192, 196, 204);

}

.bottom-box {
  padding: 8px;

  .first-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .second-line {
    margin-top: 8px;
    padding: 4px 0 8px 16px;
    min-height: 300px;
    width: 100%;
    background-color: #ececec;
    border-radius: 10px;

    .second-picW {
      margin-right: 30px;
      margin-top: 12px;
      display: flex;


      .second-pic {
        width: 170px;
        height: 170px;
      }
    }

    .second-picW1 {
      margin-right: 20px;
      margin-top: 12px;
      display: flex;
      flex-direction: column;

      .second-word {
        display: flex;
        justify-content: space-between;
        margin-right: 12px;
        margin-top: -8px;
        margin-bottom: 8px;
      }

    }

  }
}

.second-word1 {
  width: 100px;
  text-align: right;
  margin-right: 12px;
  //margin-top: 20px;
  padding-top: 8px;
}

.box-one {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;


}

.box-two {
  //padding: 5px;
  //margin-top: 15px;
  //background-color: red;
}

/deep/ .ant-table-align-left {
  background-color: #ececec !important;
}

/deep/ .ant-table-body {
  background-color: #ececec !important;
}
</style>